<template>
	<view class="integral">
		<view class="banner" v-if="lblist.length != 0">
			<view class="swiper-container">
				<swiper :autoplay="true" :circular="true" class="swiper" duration="500" :indicatorDots="true" interval="5000">
					<swiper-item :data-index="index" v-for="(item, index) in lblist" :key="item.unique">
						<image @tap="jumps" class="img" :data-appid="item.appid" :data-id="item.id" :data-name="item.title"
							:data-src="item.src" :data-type="item.item" :data-wb_src="item.src2" :src="item.logo"></image>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view
			style="background: url(/static/ymq_canyino2o/jfsc-bg.png);background-size: 100% 100%;width: 95%;margin: 20rpx auto;padding: 40rpx;border-radius: 20rpx;">
			<!-- <view class="listleft flex1"> -->
			<view class="title" style="display: flex;align-items: center;">
				<image src="../../../static/ymq_canyino2o/jf-icon.jpg" mode=""
					style="width: 40rpx;height: 40rpx;margin-right: 10rpx;"></image>
				<text style="color: #fff;">积分</text>
			</view>
			<!-- <image class="cost" src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/cost.png"></image> -->
			<view
				style="text-align: center;font-size: 70rpx;font-weight: 600;padding: 20rpx 0;color: #fff;border-bottom: 1px solid rgba(255, 255, 255, .5);">
				<!-- 积分 -->
				<text>{{ integral }}</text>
			</view>
			<!-- </view> -->
			<view class="foot" style="display: flex;justify-content: space-around;align-items: center;padding-top: 20rpx;">
				<view class="listright flex1">
					<image class="cost" src="/static/ymq_canyino2o/jfmx.jpg" style="width: 50rpx;height: 50rpx;"></image>
					<view style="color: #fff;">积分明细</view>
				</view>
				<view @tap="record" class="listright flex1">
					<image class="cost" src="/static/ymq_canyino2o/dhmx.jpg" style="width: 50rpx;height: 50rpx;"></image>
					<view style="color: #fff;">兑换明细</view>
				</view>
			</view>
		</view>
		<view class="fenlei flex2">
			<view @tap="cxfl" class="fenlist flex3" :id="item.id" v-for="(item, index) in fenlei" :key="index">
				<image class="fenimg" mode="aspectFill" :src="item.img"></image>

				<view class="fename gobyndsingle">{{ item.name }}</view>
			</view>
		</view>
		<view class="commodity" style="margin-top: 0;width: 95%;margin: 0 auto;">
			<view style="display: flex;align-items: center;justify-content: space-between;">
				<text style="color: #222020;font-size: 34rpx;">热门兑换</text>
				<text style="color: #F4185B;font-size: 28rpx;">更多</text>
			</view>
			<view class="comlist" v-if="commodity.length != 0">
				<view @tap="interinfo" class="comone" :id="item.id" v-for="(item, index) in commodity" :key="index"
					style="display: flex;">
					<view class="comimgwai flex1">
						<image class="comimg" mode="aspectFit" :src="item.img"></image>
					</view>
					<view class="" style="display: flex;flex-direction: column;justify-content: space-between;">
						<view class="onetitle gobyndsingle">{{ item.name }}</view>
						<view class="flex-center">
							<!-- <view class="comnum">{{ item.money }}</view> -->
							<view class="comred" v-if="item.type == '1'">虚拟</view>
							<view class="comred" v-if="item.type == '2'">实物</view>
						</view>
						<view class="" style="display: flex;justify-content: space-between;align-items: center;">
							<view class="comcost" style="color: #F4185B;font-size: 40rpx;font-weight: 600;">{{ item.money }} <text style="font-size: 30rpx;">积分</text></view>
							<view class="" style="width: 153rpx;
																		height: 54rpx;
																		line-height: 54rpx;
																		background: #FEEAE6;
																		border-radius: 27rpx;font-size: 28rpx;
																		font-family: PingFang SC;
																		font-weight: 500;
																		color: #F4185B;
																		text-align: center;"
																		>
								立即兑换
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="wsj" v-else>此分类暂无数据</view>
		</view>
	</view>
	</view>
</template>

<script>
	import cardlist from '@/ymq_canyino2o/dist/cardlist/index';
	import gettel from '@/ymq_canyino2o/dist/gettel/index';
	var app = getApp();
	export default {
		components: {
			cardlist,
			gettel
		},
		data() {
			return {
				slide: [{
						logo: 'http://opocfatra.bkt.clouddn.com/images/0/2017/10/tdJ70qw1fEfjfVJfFDD09570eqF28d.jpg'
					},
					{
						logo: 'http://opocfatra.bkt.clouddn.com/images/0/2017/10/k5JQwpBfpb0u8sNNy5l5bhlnrhl33W.jpg'
					},
					{
						logo: 'http://opocfatra.bkt.clouddn.com/images/0/2017/10/zUeEednDedmUkIUumN9XI6IXU91eko.jpg'
					}
				],

				fenlei: [],
				commodity: [],
				lblist: '',
				integral: '',
				top: 0
			};
		},
		onLoad: function(t) {
			this.onLoadClone3389(t);
		},
		onReady: function() {},
		onShow: function() {
			this.reLoad();
			this.top = uni.getSystemInfoSync().statusBarHeight + 44
		},
		onHide: function() {},
		onUnload: function() {},
		onPullDownRefresh: function() {
			this.onLoadClone3389({});
			uni.stopPullDownRefresh();
		},
		onReachBottom: function() {},
		onShareAppMessage: function() {},
		methods: {
			onLoadClone3389: function(t) {
				app.globalData.setNavigationBarColor(this);
				uni.hideShareMenu({});
				var that = this;
				this.reLoad();
				app.globalData.util.request({
					url: 'entry/wxapp/ad',
					cachetime: '0',

					success: function(t) {
						console.log(t);
						for (var e = [], a = 0; a < t.data.length; a++) {
							if ('6' == t.data[a].type) {
								e.push(t.data[a]);
							}
						}
						console.log(e);
						that.setData({
							lblist: e
						});
					}
				});
				app.globalData.util.request({
					url: 'entry/wxapp/Jftype',
					cachetime: '0',

					success: function(t) {
						console.log(t);
						that.setData({
							fenlei: t.data
						});
					}
				});
				app.globalData.util.request({
					url: 'entry/wxapp/JfGoods',
					cachetime: '0',

					success: function(t) {
						console.log(t);
						that.setData({
							commodity: t.data
						});
					}
				});
			},

			jumps: function(t) {
				var e = t.currentTarget.dataset.id;
				var a = t.currentTarget.dataset.name;
				var o = t.currentTarget.dataset.appid;
				var n = t.currentTarget.dataset.src;
				var r = t.currentTarget.dataset.wb_src;
				var c = t.currentTarget.dataset.type;
				console.log(e, a, o, n, r, c);
				if (1 == c) {
					console.log(n);
					uni.navigateTo({
						url: n
					});
				} else {
					if (2 == c) {
						uni.setStorageSync('vr', r);
						uni.navigateTo({
							url: '../car/car'
						});
					} else {
						if (3 == c) {
							uni.navigateToMiniProgram({
								appId: o
							});
						}
					}
				}
			},

			reLoad: function() {
				var that = this;
				var t = uni.getStorageSync('users').id;
				app.globalData.util.request({
					url: 'entry/wxapp/UserInfo',
					cachetime: '0',
					data: {
						user_id: t
					},
					success: function(t) {
						console.log(t);
						that.setData({
							integral: t.data.total_score
						});
					}
				});
			},

			record: function(t) {
				uni.navigateTo({
					url: 'record/record'
				});
			},

			interinfo: function(t) {
				console.log(t.currentTarget.id);
				uni.navigateTo({
					url: 'integralinfo/integralinfo?id=' + t.currentTarget.id
				});
			},

			cxfl: function(t) {
				console.log(t.currentTarget.id);
				var that = this;
				app.globalData.util.request({
					url: 'entry/wxapp/JftypeGoods',
					cachetime: '0',
					data: {
						type_id: t.currentTarget.id
					},
					success: function(t) {
						console.log(t);
						that.setData({
							commodity: t.data
						});
					}
				});
			}
		}
	};
</script>
<style>
	@import './integral.css';
</style>